<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/animate.css">
    <style>
        @font-face{
            font-family: "aaa";
            src: url("./aaa.TTF");
        }
        * {
            margin: 0px;
            overflow: hidden;
        }

        #app {
            position: absolute;
            top: 0px;
            bottom: 0px;
            width: 100%;
            background-image: url("./img/bg1.png");
            background-repeat: no-repeat;
            background-size: auto 100%;
        }

        .a {
            position: absolute;
            width: 150%;
            top: -90px;
            left: -25%;
        }

        .b {
            position: absolute;
            width: 80%;
            top: -50px;
            left: 10%;
        }

        .msg {
            position: absolute;
            background-image: url("./img/bg2.png");
            background-repeat: no-repeat;
            background-size: 100% auto;
            width: 100%;
            height: 500px;
            top: 100px;
            text-align: center;
            padding-top: 20%;
        }

        .msg>span {
            display: block;
            font-size: 120px;
            color: white;
            /* font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
            font-family: aaa;
        }

        .c {
            position: absolute;
            width: 170%;
            bottom: -140px;
            right: -110px;
        }

        .d {
            background-image: url("./img/bottom2.png");
            background-repeat: repeat-x;
            background-size: auto 100%;
            position: absolute;
            width: 100%;
            bottom: 20px;
            left: 0px;
            height: 80px;
        }

        .e {
            position: absolute;
            width: 80%;
            bottom: 0px;
            left: 0px;
        }

        .f {
            position: absolute;
            width: 20%;
            bottom: 0px;
            right: 20px;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>

<body>
    <audio src="" style="display: none;" autoplay></audio>
    <div id="app">
        <transition enter-active-class="animated fadeInDown" :appear="true" @after-enter=" flag1=true ">
            <img class="a" src="./img/tree.png" alt="">
        </transition>
        <transition enter-active-class="animated fadeInDown" @after-enter=" flag2=true ">
            <img v-show="flag1" class="b" src="./img/lidang.png" alt="" srcset="">
        </transition>
        <transition enter-active-class="animated fadeInUp">
            <div v-show="flag6" class="msg">
                <span>圣诞</span>
                <span>快乐</span>
            </div>
        </transition>
        <transition enter-active-class="animated fadeInUp" @after-enter=" flag3=true ">
            <img v-show="flag2" class="c" src="./img/bottombg.png" alt="" srcset="">
        </transition>
        <transition enter-active-class="animated zoomIn" @after-enter=" flag4=true ">
            <div v-show="flag3" class="d"></div>
        </transition>
        <transition enter-active-class="animated fadeInUp" @after-enter=" flag5=true ">
            <img v-show="flag4" class="e" src="./img/bottom1.png" alt="" srcset="">
        </transition>
        <transition enter-active-class="animated fadeInUp"  @after-enter=" flag6=true ">
            <img v-show="flag5" class="f" src="./img/tree2.png" alt="" srcset="">
        </transition>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            flag1: false,
            flag2: false,
            flag3: false,
            flag4: false,
            flag5: false,
            flag6: false,

        }
    })
</script>

</html>